<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>我的</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        .yyzz-detail-item{
            position: relative;
        }
        .addImg{
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
        }
        .yyzz-detail-item .title{
            width: 2.18rem !important;
        }
        .disable {
            pointer-events: none
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <div class="lineGrey"></div>
        <div class="bgf wd-sjrz" style="margin-bottom: 1rem;padding-top: .16rem;" :class="{disable:isLook}">
            <div class="title">企业营业执照副本照片或扫描图片</div>
            <div class="subTitle">请确保证件的完整、编号、文字、照片均清晰可见</div>
            <div class="yyzz" @click="uploadBusinessImg">
                <img :src="shop.businessLinenseImg" alt="">
            </div>
            <div class="yyzz-detail">
                <div class="yyzz-detail-item flex-x-sb">
                    <div class="flex-x-s">
                        <div class="title">营业执照名称</div>
                        <input type="text" placeholder="请输入营业执照名称" v-model="shop.name">
                    </div>
                </div>
                <div class="yyzz-detail-item flex-x-sb">
                    <div class="flex-x-s">
                        <div class="title">社会信用代码</div>
                        <input type="text" placeholder="请输入统一社会信用代码" v-model="shop.licenseNumber">
                    </div>
                </div>
                <div class="yyzz-detail-item flex-x-sb">
                    <div class="flex-x-s">
                        <div class="title">店铺名称</div>
                        <input type="text" placeholder="请输入店铺名称" v-model="shop.shopName">
                    </div>
                </div>
                <div class="yyzz-detail-item flex-x-s" v-for="(item,index) in shop.phones" :key="index">
                    <div class="title">{{index == 0? '联系电话':''}}</div>
                    <input type="tel" maxlength="11" placeholder="请输入联系电话" v-model="shop.phones[index]" oninput="value=value.replace(/[^\d]/g,'')">
                    <div class="addImg flex-x-e-c">
                        <div v-if="index == shop.phones.length-1 && index != 2 && !isLook">
                            <img @click="addPhone" src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/add.png" alt="">
                        </div>
                        <div v-if="shop.phones.length > 1 && !isLook">
                            <img @click="delPhone(index)" src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/sub.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="wd-yyzz-submit flex-x-c" @click="submitAuthorization" v-show="isSubmit">
            <div>
                提交认证
            </div>
        </div>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script>
        apiready = function() {

            vm = new Vue({
                el: '.app',
                data: {
                    shop: {
                        businessLinenseImg: "https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/up_yyzz.png",
                        name: "",
                        licenseNumber: "",
                        phones: [''],
                        shopName: ""
                    },
                    isSubmit: false,
                    isLook: true
                },
                mounted: function() {
                    var vm = this
                    this.getAuthorizationStatus()
                    this.getAuthorizationDetail()
                    doSoftInput(vm)
                },
                methods: {

                    getAuthorizationStatus() {
                        let vm = this
                        mime("getAuthorizationStatus")(function(ret) {
                            console.log("@@:" + JSON.stringify(ret))
                            if (ret.data.merchant === -1 || ret.data.merchant === 2){
                                vm.isSubmit = true
                                vm.isLook = false
                            }
                        })
                    },

                    submitAuthorization() {
                        let vm = this
                        let phones = []
                        if (vm.shop.businessLinenseImg === 'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/up_yyzz.png') {
                            toastMiddle("请上传营业执照！")
                            return false
                        }
                        if (!vm.shop.name) {
                            toastMiddle("请填写营业执照名称！")
                            return false
                        }
                        if (!vm.shop.licenseNumber) {
                            toastMiddle("请填写社会信用代码！")
                            return false
                        }
                        if (!vm.shop.shopName) {
                            toastMiddle("请填写店铺名称！")
                            return false
                        }
                        if (!vm.shop.phones || (vm.shop.phones && vm.shop.phones.length <= 0)) {
                            toastMiddle("请至少填写一个联系电话！")
                            return false
                        }else {
                            for (let i = 0; i < vm.shop.phones.length; i++) {
                                let item = vm.shop.phones[i]
                                if (item == '') {
                                    if(i == 0){
                                        toastMiddle('您还没有填写电话号码！')
                                        return false;
                                    }
                                }else{
                                    if (!(/^1[3456789]\d{9}$/.test(item))) {
                                        toastMiddle('请输入正确的手机号！')
                                        return false;
                                    }else {
                                        phones.push(item)
                                    }
                                }
                            }
                        }
                        const param = {
                            certificationType: "MERCHANT",
                            licenseNumber: vm.shop.licenseNumber,
                            name: vm.shop.name,
                            phones: phones,
                            shopName: vm.shop.shopName
                        }
                        fnPost(interfaces.USER_MODULE.AUTHORIZATION.MERCHANT_AUTHORIZATION, param, function(ret, err) {
                            if (ret && ret.code === RESPONSE_OK) {
                                api.sendEvent({name: "updateShopStatus"})
                                api.alert({title: '上传成功,等待管理员审核',}, () => {
                                    api.closeWin()
                                });
                            } else
                                toastMiddle(ret ? ret.msg : '');
                        })
                    },
                    getAuthorizationDetail() {
                        let vm = this
                        mime("getAuthorizationDetail")("MERCHANT", function(ret) {
                            if (ret.data) {
                                vm.shop.businessLinenseImg = ret.data.enBusinessUrl || "https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/up_yyzz.png"
                                vm.shop.name = ret.data.bizName
                                vm.shop.shopName = ret.data.shopName
                                vm.shop.licenseNumber = ret.data.enterpriceCode
                                vm.shop.phones = ret.data.contacts
                            }
                        })
                    },
                    uploadBusinessImg(index) {
                        let vm = this
                        var params = {
                            imageType: "BIZ"
                        }
                        uploadIDCardImg(ret => {
                            if (ret && ret.code === RESPONSE_OK) {
                                const resourceInfo = ret.data;
                                if (!resourceInfo.object) {
                                    toastMiddle("图片识别失败，请重新识别")
                                    return false
                                }
                                vm.shop.businessLinenseImg = resourceInfo.imgPath
                                vm.shop.name = resourceInfo.object.name
                                vm.shop.licenseNumber = resourceInfo.object.regNum
                            } else {
                                toastMiddle("图片识别失败，请重新识别");
                            }
                        }, params);
                    },

                    delPhone: function(index){
                        this.shop.phones.splice(index,1)
                    },

                    addPhone: function() {
                        if (this.shop.phones.length > 2) {
                            return
                        }
                        if (!this.shop.phones[this.shop.phones.length - 1]){
                            toastMiddle('您还没有填写电话号码！');
                            return;
                        }
                        this.shop.phones.push('')
                    },
                },
            })
        }
    </script>
</body>

</html>
